<template>
  <div>
    <el-container>
      <el-header
        ><el-page-header content="注册" @back="$router.back()">
        </el-page-header>
      </el-header>
      <el-main>


        <div class="content">

          
          <el-form
            :model="registerFrom"
            label-width="100px"
            size="medium"
            :rules="rules"
            ref="ruleForm"
          >

          <el-form-item >
            <span slot="label">
                <div class="title">用户注册</div>
              </span>
          </el-form-item>


            <el-form-item prop="phone">
              <span slot="label">
                <span class="item">手机号码</span>
              </span>
              <el-input v-model="registerFrom.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
          

            <el-form-item prop="password">
              <span slot="label">
                <span class="item">密码</span>
              </span>
              <el-input type="password" v-model="registerFrom.password" placeholder="请输入密码"></el-input>
            </el-form-item>

            <el-form-item prop="password1">
              <span slot="label">
                <span class="item">确认密码</span>
              </span>
              <el-input type="password" v-model="registerFrom.password1" placeholder="请输入密码"></el-input>
            </el-form-item>

            <el-form-item label=":" prop="captcha">
              <span slot="label">
                <span class="item">验证码</span>
              </span>
              <el-input type="text" autocomplete="off" placeholder="验证码" v-model="registerFrom.captcha"  v-on:keyup.enter.native="submitForm('ruleForm')">
                <el-button slot="append" icon="el-icon-message" type="primary"
                  >
                  <span v-show="show" @click="getCode()">发送验证码</span>
                    <span v-show="!show" >{{count}}s重新发送</span>
                    </el-button>   
              </el-input>
            </el-form-item>

            
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {sendMsg,register} from '@/api/user'
import {setToken} from '@/request/token'
export default {
  data() {
    var isPhone = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
    var checkPhone=(rule,value,callback)=>{
      setTimeout(()=>{
        if(value===null||!isPhone.test(value)||value===''){
          callback(new Error('请输入正确手机号'))
        }else{
        callback()
      }
      },500)
      
    };
    var checkCaptcha=(rule,value,callback)=>{
      if(value===''||value===null){
        callback(new Error('验证码不能为空！'))
      
    }else{
        callback()
      }
  };
    var checkPassword=(rule,value,callback)=>{
      if(!value){
        callback(new Error('密码不能为空！'))
      }else{
        if(value.length<6||value.length>12){
          callback(new Error('密码要符合6-12位！'))
        }else{
        callback()
        }
      }
     
    };
    var checkPassword1=(rule,value,callback)=>{
      if(value!=this.registerFrom.password){
        callback(new Error('密码不一致！'))
      }else{
        callback()
      }
     
    }
    return {
      registerFrom:{
        phone:"",
        password:"",
        password1:"",
        captcha: ""
      },
      msg:'',
      rules:{
        phone:[
          {validator:checkPhone,trigger:'blur'}
        ],
        captcha:[
          {validator: checkCaptcha,trigger:'blur'}
        ],
        password:[
          {validator:checkPassword,trigger:'blur'}
        ],
        password1:[
          {validator:checkPassword1,trigger:'blur'}
        ]
      },
      show: true,
      count:'',
      timer: null,
      
      sex: "1",
    };
  },
  methods: {
    submitForm(formName) {
     
     this.$refs[formName].validate((valid) => {
       if (valid) {
          if(this.registerFrom.captcha!==this.msg){
            return this.$message.error("验证码错误")
          }
          const user={
            phone:this.registerFrom.phone,
            password:this.registerFrom.password
          }
          register(user).then(res=>{
            if(!res.success){
              return this.$message.error("该手机号已被注册")
            }
            this.$message.success('注册成功，欢迎您');
                setToken(res.data)
                this.$router.push("/home")
          })
       } else {
         console.log('error submit!!');
         return false;
       }
     });
   },
    getCode() {
      var isPhone = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
      if(this.registerFrom.phone===null||!isPhone.test(this.registerFrom.phone)||this.registerFrom.phone===''){
        return  this.$message.warning("请输入正确手机号")
      }
      const  time_count = 60;
      if (!this.timer) {
        this.count = time_count;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count >0 && this.count <= time_count) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          } 
        },1000)
      }
      const user={
        phone:this.registerFrom.phone
      }
      sendMsg(user).then(res=>{
        this.msg=res.data
      })
    }
  },
};
</script>

<style scoped lang="less">
.content {
  width: 350px;
  height: 350px;
  padding: 40px;
  box-shadow: 4px 4px 8px 5px rgb(161, 188, 200);

  /* background-color: rgba(80, 182, 233, 0.44); */
  // background: url("@/assets/img/register.jpg");
  background-size: cover;
  background-position: center center;

  /* -webkit-background-size: cover; */
  background-repeat: no-repeat;

  background-attachment: fixed;
  border-radius: 20px;
  margin: 10px auto;
}
.item {
  // color: rgb(255, 255, 255);
  color: rgb(22, 20, 20);

  font-size: 20px;
  float: left;
}
.el-input {
  width: 240px;
}
.el-form-item {
  margin-left: 10px;
}

.el-radio {
  color: rgb(249, 246, 246);
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}
.title{
  font-size: 26px;
  font-weight: 900;
  color: rgb(173, 197, 246);
  width: 150px;
  margin-left: -60px;
}


</style>